<template>
  <div class="article-list-container">
    <!-- 搜索区域 -->
    <a-card class="search-card">
      <a-form layout="inline" :model="searchForm">
        <a-form-item label="标题">
          <a-input 
            v-model:value="searchForm.keyword" 
            placeholder="请输入文章标题" 
            style="width: 200px"
            allowClear
            @pressEnter="handleSearch"
          />
        </a-form-item>
        <!-- <a-form-item label="状态">
          <a-select 
            v-model:value="searchForm.status" 
            placeholder="请选择状态" 
            style="width: 120px"
            allowClear
          >
            <a-select-option value="draft">草稿</a-select-option>
            <a-select-option value="published">已发布</a-select-option>
            <a-select-option value="archived">已归档</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="是否精选">
          <a-select 
            v-model:value="searchForm.is_featured" 
            placeholder="请选择" 
            style="width: 100px"
            allowClear
          >
            <a-select-option :value="true">是</a-select-option>
            <a-select-option :value="false">否</a-select-option>
          </a-select>
        </a-form-item> -->
        <a-form-item>
          <a-button type="primary" @click="handleSearch" :loading="loading">搜索</a-button>
          <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 操作按钮 -->
    <div style="margin-bottom: 16px">
      <a-button type="primary" @click="handleCreateH5">创建H5文章</a-button>
      <a-button type="primary" style="margin-left: 8px" @click="handleCreateCustom">创建自定义文章</a-button>
    </div>

    <!-- 文章列表 -->
    <a-card class="article-table">
      <a-table
        :columns="columns"
        :data-source="articleList"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        row-key="id"
        :scroll="{ x: 1200 }"
        :locale="{ emptyText: '暂无文章数据' }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'title'">
            <a @click="handleDetail(record)">{{ record.title }}</a>
          </template>
          <template v-else-if="column.key === 'type'">
            <a-tag :color="record.type === 'h5' ? 'blue' : 'green'">
              {{ record.type === 'h5' ? 'H5文章' : '自定义文章' }}
            </a-tag>
          </template>
          <template v-else-if="column.key === 'status'">
            <a-tag 
              :color="getStatusColor(record.status)" 
              class="status-tag"
            >
              {{ getStatusText(record) }}
            </a-tag>
          </template>
          <template v-else-if="column.key === 'is_featured'">
            <a-tag :color="record.is_featured ? 'orange' : 'default'">
              {{ record.is_featured ? '是' : '否' }}
            </a-tag>
          </template>
          <template v-else-if="column.key === 'is_active'">
            <a-tag :color="record.is_active ? 'green' : 'red'">
              {{ record.is_active ? '激活' : '禁用' }}
            </a-tag>
          </template>
          <template v-else-if="column.key === 'created_at'">
            {{ formatDate(record.created_at) }}
          </template>
          <template v-else-if="column.key === 'action'">
            <div class="action-buttons">
              <a-button size="small" @click="handleEdit(record)">编辑</a-button>
              <a-button 
                size="small" 
                type="primary" 
                @click="handlePublish(record)"
                v-if="record.status !== 'published'"
                style="background-color: #52c41a; border-color: #52c41a;"
              >
                发布
              </a-button>
              <a-button 
                size="small" 
                danger 
                @click="handleArchiveArticle(record)"
                v-if="record.status === 'published' && record.is_active"
                :loading="archiveLoading"
              >
                下架
              </a-button>
              <a-button 
                size="small" 
                danger 
                @click="handleDelete(record)"
              >
                删除
              </a-button>
            </div>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 文章详情模态框 -->
    <a-modal
      :open="detailModalVisible"
      title="文章详情"
      width="800px"
      @cancel="handleDetailModalClose"
      :footer="null"
    >
      <div v-if="articleDetail">
        <!-- 基本信息 -->
        <div class="detail-section">
          <h4 class="section-title">基本信息</h4>
          <div class="detail-grid">
            <div class="detail-item">
              <span class="label">ID:</span>
              <span class="value">{{ articleDetail.id || '-' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">标题:</span>
              <span class="value">{{ articleDetail.title || '-' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">描述:</span>
              <span class="value">{{ articleDetail.description || '-' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">类型:</span>
              <span class="value">{{ articleDetail.type === 'h5' ? 'H5文章' : '自定义文章' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">状态:</span>
              <span class="value">{{ getStatusText(articleDetail) }}</span>
            </div>
            <div class="detail-item" v-if="articleDetail.h5_url">
              <span class="label">H5链接:</span>
              <span class="value">
                <a :href="articleDetail.h5_url" target="_blank">{{ articleDetail.h5_url }}</a>
              </span>
            </div>
          </div>
        </div>

        <!-- 状态信息 -->
        <div class="detail-section">
          <h4 class="section-title">状态信息</h4>
          <div class="detail-grid">
            <div class="detail-item">
              <span class="label">是否精选:</span>
              <span class="value">{{ articleDetail.is_featured ? '是' : '否' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">是否激活:</span>
              <span class="value">{{ articleDetail.is_active ? '是' : '否' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">创建时间:</span>
              <span class="value">{{ formatDate(articleDetail.created_at) }}</span>
            </div>
            <div class="detail-item">
              <span class="label">更新时间:</span>
              <span class="value">{{ formatDate(articleDetail.updated_at) }}</span>
            </div>
          </div>
        </div>

        <!-- 内容预览 -->
        <div class="detail-section" v-if="articleDetail.content">
          <h4 class="section-title">内容预览</h4>
          <div class="content-preview-container">
            <div v-if="getContentImages(articleDetail.content).length === 0" class="empty-content">
              <a-empty description="暂无内容" :image="false" />
            </div>
            <div v-else class="content-images-grid">
              <div 
                v-for="(item, index) in getContentImages(articleDetail.content)" 
                :key="index"
                class="content-image-item"
              >
                <div class="image-wrapper">
                  <img 
                    :src="item.thumbnail_url || item.url" 
                    :alt="item.original_name || item.name"
                    class="content-image"
                    @error="handleImageError"
                  />
                  <div class="image-overlay">
                    <div class="image-info">
                      <div class="image-name">{{ item.original_name || item.name }}</div>
                      <div class="image-size">{{ formatFileSize(item.file_size) }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 背景资源信息 -->
        <div class="detail-section" v-if="articleDetail.background_music || articleDetail.background_image">
          <h4 class="section-title">背景资源</h4>
          <div class="background-resources">
            <div v-if="articleDetail.background_music" class="resource-item">
              <div class="resource-video-container">
                <div class="resource-info">
                   <div class="resource-name">背景视频</div>
                   <div class="resource-details">{{ getBackgroundMusicInfo(articleDetail.background_music) }}</div>
                 </div>
                <div class="video-player-container">
                  <video 
                    ref="backgroundMusicVideo"
                    :src="articleDetail.background_music.oss_url"
                    controls
                    preload="metadata"
                    class="background-music-video"
                    @loadstart="handleVideoLoadStart"
                    @canplay="handleVideoCanPlay"
                    @error="handleVideoError"
                    @ended="handleVideoEnded"
                  >
                    您的浏览器不支持视频播放
                  </video>
                </div>
              </div>
            </div>
            <div v-if="articleDetail.background_image" class="resource-item">
              <div class="resource-icon">
                <img 
                  :src="getBackgroundImageUrl(articleDetail.background_image)" 
                  alt="背景图片"
                  class="background-image-thumb"
                  @error="handleImageError"
                  @click="previewBackgroundImage(articleDetail.background_image)"
                  style="cursor: pointer;"
                />
              </div>
              <div class="resource-info">
                <div class="resource-name">背景图片</div>
                <div class="resource-details">{{ getBackgroundImageInfo(articleDetail.background_image) }}</div>
              </div>
              <div class="resource-actions">
                <a-button 
                  type="primary" 
                  size="small" 
                  @click="previewBackgroundImage(articleDetail.background_image)"
                  :icon="h(EyeOutlined)"
                >
                  预览
                </a-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 编辑文章模态框 -->
    <a-modal
      :open="editModalVisible"
      title="编辑文章"
      width="600px"
      @ok="handleEditSubmit"
      @cancel="handleEditCancel"
      :confirm-loading="editLoading"
    >
      <a-form
        :model="editForm"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        layout="horizontal"
      >
        <a-form-item label="文章标题" name="title" :rules="[{ required: true, message: '请输入文章标题' }]">
          <a-input v-model:value="editForm.title" placeholder="请输入文章标题" />
        </a-form-item>
        
        <a-form-item label="文章描述" name="description" :rules="[{ required: true, message: '请输入文章描述' }]">
          <a-textarea 
            v-model:value="editForm.description"
            placeholder="请输入文章描述"
            :rows="4"
          />
        </a-form-item>
        
        <a-form-item label="排序" name="sort">
              <a-input-number 
                v-model:value="createCustomForm.sort" 
                :min="1" 
                :max="9999" 
                placeholder="请输入排序值"
                style="width: 100%"
              />
            </a-form-item>
         
         <a-form-item label="展示类型" name="show_type">
           <a-radio-group v-model:value="editForm.show_type">
             <a-radio :value="1">随机</a-radio>
             <a-radio :value="2">起始时间</a-radio>
           </a-radio-group>
         </a-form-item>
         
         <a-form-item label="展示开始时间" name="show_start" v-if="editForm.show_type === 2">
           <a-date-picker 
             v-model:value="editForm.show_start" 
             placeholder="请选择开始时间"
             style="width: 100%"
             format="YYYY-MM-DD"
             value-format="YYYY-MM-DD"
           />
         </a-form-item>
         
         <a-form-item label="展示结束时间" name="show_end" v-if="editForm.show_type === 2">
           <a-date-picker 
             v-model:value="editForm.show_end" 
             placeholder="请选择结束时间"
             style="width: 100%"
             format="YYYY-MM-DD"
             value-format="YYYY-MM-DD"
             :disabled-date="(current) => editForm.show_start && current && current.format('YYYY-MM-DD') <= editForm.show_start"
           />
        </a-form-item>
        
        <!-- <a-form-item label="状态" name="status">
          <a-select v-model:value="editForm.status" placeholder="请选择状态">
            <a-select-option value="draft">草稿</a-select-option>
            <a-select-option value="published">已发布</a-select-option>
            <a-select-option value="archived">已下架</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="是否精选" name="is_featured">
          <a-radio-group v-model:value="editForm.is_featured">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-item>
        
        <a-form-item label="是否激活" name="is_active">
          <a-radio-group v-model:value="editForm.is_active">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-item> -->
        

      </a-form>
    </a-modal>

    <!-- 创建H5文章模态框 -->
    <a-modal
      :open="createH5ModalVisible"
      title="创建H5文章"
      width="600px"
      @ok="handleCreateH5Submit"
      @cancel="handleCreateH5Cancel"
      :confirm-loading="createH5Loading"
    >
      <a-form
        :model="createH5Form"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        layout="horizontal"
      >
        <a-form-item label="文章标题" name="title" :rules="[{ required: true, message: '请输入文章标题' }]">
          <a-input v-model:value="createH5Form.title" placeholder="请输入文章标题" />
        </a-form-item>
        
        <a-form-item label="文章描述" name="description" :rules="[{ required: true, message: '请输入文章描述' }]">
          <a-textarea 
            v-model:value="createH5Form.description"
            placeholder="请输入文章描述"
            :rows="4"
          />
        </a-form-item>
        
        <a-form-item label="H5链接" name="h5_url" :rules="[
          { required: true, message: '请输入H5链接' },
          { type: 'url', message: '请输入有效的URL格式' }
        ]">
          <a-input v-model:value="createH5Form.h5_url" placeholder="请输入H5链接" />
        </a-form-item>
        
        <a-form-item label="状态" name="status">
          <a-select v-model:value="createH5Form.status" placeholder="请选择状态">
            <a-select-option value="draft">草稿</a-select-option>
            <a-select-option value="published">已发布</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="是否精选" name="is_featured">
          <a-radio-group v-model:value="createH5Form.is_featured">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-item>
        
        <a-form-item label="是否激活" name="is_active">
          <a-radio-group v-model:value="createH5Form.is_active">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 创建自定义文章模态框 -->
    <a-modal
      :open="createCustomModalVisible"
      title="创建自定义文章"
      width="1200px"
      @ok="handleCreateCustomSubmit"
      @cancel="handleCreateCustomCancel"
      :confirm-loading="createCustomLoading"
    >
      <div class="custom-article-modal-content">
        <div class="form-section">
          <a-form
            :model="createCustomForm"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 18 }"
            layout="horizontal"
          >
            <a-form-item label="文章标题" name="title" :rules="[{ required: true, message: '请输入文章标题' }]">
              <a-input v-model:value="createCustomForm.title" placeholder="请输入文章标题" />
            </a-form-item>
            
            <a-form-item label="文章描述" name="description" :rules="[{ required: true, message: '请输入文章描述' }]">
              <a-textarea 
                v-model:value="createCustomForm.description"
                placeholder="请输入文章描述"
                :rows="4"
              />
            </a-form-item>
            
            <a-form-item label="文章内容" name="content" :rules="[{ required: true, message: '请上传至少一张图片' }]">
              <a-upload
                :file-list="[]"
                :before-upload="handleContentImageUpload"
                accept="image/*"
                :show-upload-list="false"
                :disabled="contentImageUploading"
                multiple
              >
                <a-button :loading="contentImageUploading" size="large" style="width: 100%; height: 120px;">
                  <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
                    <template v-if="!contentImageUploading">
                      <UploadOutlined style="font-size: 24px; margin-bottom: 8px;" />
                      <span>点击上传图片</span>
                      <span style="font-size: 12px; color: #999; margin-top: 4px;">支持多张图片上传</span>
                    </template>
                    <template v-else>
                      <span>上传中...</span>
                    </template>
                  </div>
                </a-button>
              </a-upload>
              <div class="content-tip" style="margin-top: 8px;">
                <a-typography-text type="secondary" style="font-size: 12px;">
                  支持 JPG、PNG、GIF 格式，每张图片不超过 5MB
                </a-typography-text>
              </div>
            </a-form-item>
            
            <a-form-item label="背景视频">
              <a-upload
                :file-list="backgroundMusicFileList"
                :before-upload="handleBackgroundMusicUpload"
                @remove="handleRemoveBackgroundMusic"
                accept="video/*,audio/*"
                :max-count="1"
                :disabled="backgroundMusicUploading"
              >
                <a-button :loading="backgroundMusicUploading">
                  <upload-outlined v-if="!backgroundMusicUploading" /> 
                  {{ backgroundMusicUploading ? '上传中...' : '选择视频/音频文件' }}
                </a-button>
              </a-upload>
              <div v-if="createCustomForm.background_music_name" style="margin-top: 8px; color: #52c41a;">
                已上传: {{ createCustomForm.background_music_name }}
              </div>
              <div class="upload-tip">
                <a-typography-text type="secondary" style="font-size: 12px;">
                  支持 MP4、AVI、MOV 等视频格式，以及 MP3、WAV、M4A 等音频格式
                </a-typography-text>
              </div>
            </a-form-item>
            
            <a-form-item label="背景图片">
              <a-upload
                :file-list="backgroundImageFileList"
                :before-upload="handleBackgroundImageUpload"
                @remove="handleRemoveBackgroundImage"
                accept="image/*"
                :max-count="1"
                :disabled="backgroundImageUploading"
              >
                <a-button :loading="backgroundImageUploading">
                  <upload-outlined v-if="!backgroundImageUploading" /> 
                  {{ backgroundImageUploading ? '上传中...' : '选择图片文件' }}
                </a-button>
              </a-upload>
              <div v-if="createCustomForm.background_image_name" style="margin-top: 8px; color: #52c41a;">
                已上传: {{ createCustomForm.background_image_name }}
              </div>
              <div class="upload-tip">
                <a-typography-text type="secondary" style="font-size: 12px;">
                  支持 JPG、PNG、GIF 等图片格式
                </a-typography-text>
              </div>
            </a-form-item>
            
            <a-form-item label="状态" name="status">
              <a-select v-model:value="createCustomForm.status" placeholder="请选择状态">
                <a-select-option value="draft">草稿</a-select-option>
                <a-select-option value="published">已发布</a-select-option>
              </a-select>
            </a-form-item>
            
            <a-form-item label="是否精选" name="is_featured">
              <a-radio-group v-model:value="createCustomForm.is_featured">
                <a-radio :value="true">是</a-radio>
                <a-radio :value="false">否</a-radio>
              </a-radio-group>
            </a-form-item>
            
            <a-form-item label="是否激活" name="is_active">
              <a-radio-group v-model:value="createCustomForm.is_active">
                <a-radio :value="true">是</a-radio>
                <a-radio :value="false">否</a-radio>
              </a-radio-group>
            </a-form-item>
            
            <a-form-item label="排序" name="sort">
              <a-input-number 
                v-model:value="createCustomForm.sort" 
                placeholder="请输入排序数字(1-9999)" 
                :min="1" 
                :max="9999" 
                style="width: 100%"
              />
            </a-form-item>
            
            <a-form-item label="展示类型" name="show_type">
              <a-radio-group v-model:value="createCustomForm.show_type">
                <a-radio :value="1">随机</a-radio>
                <a-radio :value="2">起始时间</a-radio>
              </a-radio-group>
            </a-form-item>
            
            <a-form-item 
              v-if="createCustomForm.show_type === 2" 
              label="展示开始时间" 
              name="show_start"
            >
              <a-date-picker 
                v-model:value="createCustomForm.show_start" 
                placeholder="请选择开始时间" 
                format="YYYY-MM-DD" 
                value-format="YYYY-MM-DD"
                style="width: 100%"
              />
            </a-form-item>
            
            <a-form-item 
              v-if="createCustomForm.show_type === 2" 
              label="展示结束时间" 
              name="show_end"
            >
              <a-date-picker 
                v-model:value="createCustomForm.show_end" 
                placeholder="请选择结束时间" 
                format="YYYY-MM-DD" 
                value-format="YYYY-MM-DD"
                style="width: 100%"
                :disabled-date="(current) => createCustomForm.show_start && current && current.format('YYYY-MM-DD') <= createCustomForm.show_start"
              />
            </a-form-item>
          </a-form>
        </div>
        <div class="preview-section">
          <div class="phone-container">
            <div class="phone-header">
              <span>内容预览</span>
            </div>
            <div class="phone-content">
              <div v-if="contentImages.length === 0" class="empty-content">
                <a-empty description="暂无图片" :image="false" />
              </div>
              <div v-else class="image-list">
                <div 
                  v-for="(image, index) in contentImages" 
                  :key="image.id"
                  class="image-item"
                >
                  <img :src="image.preview" :alt="image.name" />
                  <div class="image-actions">
                    <a-button 
                      type="text" 
                      size="small" 
                      danger 
                      @click="removeContentImage(index)"
                    >
                      <template #icon>
                        <DeleteOutlined />
                      </template>
                    </a-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 图片预览模态框 -->
    <a-modal
      :open="imagePreviewVisible"
      :title="previewImageTitle"
      :footer="null"
      @cancel="closeImagePreview"
      width="80%"
      centered
    >
      <div style="text-align: center;">
        <img 
          :src="previewImageUrl" 
          :alt="previewImageTitle"
          style="max-width: 100%; max-height: 70vh; object-fit: contain;"
        />
      </div>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, onMounted, nextTick, h } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { UploadOutlined, DeleteOutlined, PlayCircleOutlined, EyeOutlined } from '@ant-design/icons-vue'
import { articleApi } from '@/api/article'
import { customArticleApi } from '@/api/customArticle'
import { fileApi } from '@/api/file'

export default defineComponent({
  name: 'ArticleListView',
  components: {
    UploadOutlined,
    DeleteOutlined
  },
  setup() {
    // 响应式数据
    const loading = ref(false)
    const articleList = ref([])
    const searchForm = reactive({
      keyword: '',
      status: undefined,
      is_featured: undefined
    })
    
    // 分页配置
    const pagination = reactive({
      current: 1,
      pageSize: 20,
      total: 0,
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: (total) => `共 ${total} 条记录`
    })
    
    // 表格列配置
    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        width: 80
      },
      {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
        ellipsis: true,
        width: 200
      },
      {
        title: '类型',
        dataIndex: 'type',
        key: 'type',
        width: 100
      },
      {
        title: '描述',
        dataIndex: 'description',
        key: 'description',
        ellipsis: true,
        width: 200
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 100
      },
      {
        title: '精选',
        dataIndex: 'is_featured',
        key: 'is_featured',
        width: 80
      },
      {
        title: '激活',
        dataIndex: 'is_active',
        key: 'is_active',
        width: 80
      },
      {
        title: '创建时间',
        dataIndex: 'created_at',
        key: 'created_at',
        width: 180
      },
      {
        title: '操作',
        key: 'action',
        width: 200,
        fixed: 'right'
      }
    ]
    
    // 获取文章列表
    const fetchArticleList = async () => {
      loading.value = true
      try {
        const requestData = {
          page: pagination.current,
          per_page: pagination.pageSize,
          keyword: searchForm.keyword || undefined,
          // status: searchForm.status || undefined,
          // is_featured: searchForm.is_featured
        }
        
        const response = await articleApi.getList(requestData)
        
        if (response && response.data) {
          articleList.value = response.data.articles || []
          // 根据mock数据结构调整分页信息
          if (response.data.pagination) {
            pagination.total = response.data.pagination.total || 0
            pagination.current = response.data.pagination.current_page || 1
            pagination.pageSize = response.data.pagination.per_page || 20
          } else {
            pagination.total = response.data.total || 0
          }
        } else {
          articleList.value = []
          pagination.total = 0
        }
      } catch (error) {
        console.error('获取文章列表失败:', error)
        const errorMessage = error.response?.data?.message || error.message || '获取文章列表失败'
        message.error(errorMessage)
        articleList.value = []
        pagination.total = 0
      } finally {
        loading.value = false
      }
    }
    
    // 搜索
    const handleSearch = () => {
      pagination.current = 1
      fetchArticleList()
    }
    
    // 重置搜索
    const handleReset = () => {
      searchForm.title = ''
      searchForm.status = undefined
      searchForm.is_featured = undefined
      pagination.current = 1
      fetchArticleList()
    }
    
    // 表格变化处理
    const handleTableChange = (pag) => {
      pagination.current = pag.current
      pagination.pageSize = pag.pageSize
      fetchArticleList()
    }
    
    // 文章详情相关
    const detailModalVisible = ref(false)
    const articleDetail = ref(null)
    
    const handleDetail = async (record) => {
      try {
        const response = await articleApi.getDetail(record.id)
        if (response && response.data) {
          articleDetail.value = response.data
          detailModalVisible.value = true
        }
      } catch (error) {
        console.error('获取文章详情失败:', error)
        message.error('获取文章详情失败')
      }
    }
    
    const handleDetailModalClose = () => {
      detailModalVisible.value = false
      articleDetail.value = null
    }

    // 图片预览相关
    const imagePreviewVisible = ref(false)
    const previewImageUrl = ref('')
    const previewImageTitle = ref('')

    // 音频播放相关
    const audioPlayer = ref(null)
    const currentAudio = ref(null)
    
    // 编辑文章相关
    const editModalVisible = ref(false)
    const editLoading = ref(false)
    const archiveLoading = ref(false)
    const editForm = reactive({
      id: null,
      title: '',
      description: '',
      status: '',
      is_featured: false,
      is_active: true,
      sort: 1,
      show_type: 1,
      show_start: null,
      show_end: null
    })
    
    const handleEdit = (record) => {
      editForm.id = record.id
      editForm.title = record.title
      editForm.description = record.description
      editForm.status = record.status
      editForm.is_featured = record.is_featured
      editForm.is_active = record.is_active
      editForm.sort = record.sort || 1
      editForm.show_type = record.show_type || 1
      editForm.show_start = record.show_start || null
      editForm.show_end = record.show_end || null
      nextTick(() => {
        editModalVisible.value = true
      })
    }
    
    const handleEditSubmit = async () => {
      if (!editForm.title) {
        message.error('请输入文章标题')
        return
      }
      if (!editForm.description) {
        message.error('请输入文章描述')
        return
      }
      
      editLoading.value = true
      try {
        const response = await articleApi.update(editForm.id, {
          title: editForm.title,
          description: editForm.description,
          status: editForm.status,
          is_featured: editForm.is_featured,
          is_active: editForm.is_active,
          sort: editForm.sort,
          show_type: editForm.show_type,
          show_start: editForm.show_start,
          show_end: editForm.show_end
        })
        
        if (response && response.code === 200) {
          message.success('文章更新成功')
          editModalVisible.value = false
          handleEditCancel()
          fetchArticleList()
        } else {
          message.error(response?.message || '文章更新失败')
        }
      } catch (error) {
        console.error('文章更新失败:', error)
        message.error('文章更新失败')
      } finally {
        editLoading.value = false
      }
    }
    
    // 下架文章
    const handleArchiveArticle = async (record) => {
      Modal.confirm({
        title: '确认下架',
        content: `确定要下架文章「${record.title}」吗？`,
        onOk: async () => {
          archiveLoading.value = true
          try {
            const response = await articleApi.update(record.id, {
              status: "archived"
            })
            
            if (response && response.code === 200) {
              message.success('文章下架成功')
              fetchArticleList()
            } else {
              message.error(response?.message || '文章下架失败')
            }
          } catch (error) {
            console.error('文章下架失败:', error)
            message.error('文章下架失败')
          } finally {
            archiveLoading.value = false
          }
        }
      })
    }
    
    const handleEditCancel = () => {
      editModalVisible.value = false
      editForm.id = null
      editForm.title = ''
      editForm.description = ''
      editForm.status = ''
      editForm.is_featured = false
      editForm.is_active = true
      editForm.sort = 1
      editForm.show_type = 1
      editForm.show_start = null
      editForm.show_end = null
    }
    
    // 创建H5文章相关
    const createH5ModalVisible = ref(false)
    const createH5Loading = ref(false)
    const createH5Form = reactive({
      title: '',
      description: '',
      h5_url: '',
      status: 'draft',
      is_featured: false,
      is_active: true
    })
    
    const handleCreateH5 = () => {
      createH5ModalVisible.value = true
    }
    
    const handleCreateH5Submit = async () => {
      if (!createH5Form.title) {
        message.error('请输入文章标题')
        return
      }
      if (!createH5Form.description) {
        message.error('请输入文章描述')
        return
      }
      if (!createH5Form.h5_url) {
        message.error('请输入H5链接')
        return
      }
      
      createH5Loading.value = true
      try {
        const response = await articleApi.createH5(createH5Form)
        
        if (response && response.code === 200) {
          message.success('H5文章创建成功')
          createH5ModalVisible.value = false
          handleCreateH5Cancel()
          fetchArticleList()
        } else {
          message.error(response?.message || 'H5文章创建失败')
        }
      } catch (error) {
        console.error('H5文章创建失败:', error)
        message.error('H5文章创建失败')
      } finally {
        createH5Loading.value = false
      }
    }
    
    const handleCreateH5Cancel = () => {
      createH5ModalVisible.value = false
      createH5Form.title = ''
      createH5Form.description = ''
      createH5Form.h5_url = ''
      createH5Form.status = 'draft'
      createH5Form.is_featured = false
      createH5Form.is_active = true
    }
    
    // 创建自定义文章相关
    const createCustomModalVisible = ref(false)
    const createCustomLoading = ref(false)
    const createCustomForm = reactive({
      title: '',
      description: '',
      status: 'draft',
      is_featured: false,
      is_active: true,
      background_music: null, // 完整的背景音乐资源数据
      background_image: null, // 完整的背景图片资源数据
      sort: 1, // 排序字段，默认为1
      show_type: 1, // 展示类型，默认为随机
      show_start: null, // 展示开始时间
      show_end: null // 展示结束时间
    })
    
    // 文件上传相关
    const backgroundMusicFileList = ref([])
    const backgroundImageFileList = ref([])
    const backgroundMusicUploading = ref(false)
    const backgroundImageUploading = ref(false)
    
    // content图片相关
    const contentImages = ref([])
    const contentImageUploading = ref(false)
    
    const handleCreateCustom = () => {
      createCustomModalVisible.value = true
    }
    
    const handleCreateCustomSubmit = async () => {
      if (!createCustomForm.title) {
        message.error('请输入文章标题')
        return
      }
      if (!createCustomForm.description) {
        message.error('请输入文章描述')
        return
      }
      if (contentImages.value.length === 0) {
        message.error('请上传至少一张图片')
        return
      }
      
      createCustomLoading.value = true
      try {
        // 构建content数据，保存完整的资源信息
        const contentData = contentImages.value.map(image => ({
          type: 'image',
          file_id: image.file_id,
          name: image.name,
          url: image.url,
          thumbnail_url: image.thumbnail_url,
          file_size: image.file_size,
          file_type: image.file_type,
          original_name: image.original_name
        }))
        
        // 构建请求数据
        const requestData = {
          title: createCustomForm.title,
          description: createCustomForm.description,
          content: JSON.stringify(contentData),
          status: createCustomForm.status,
          is_featured: createCustomForm.is_featured,
          is_active: createCustomForm.is_active,
          sort: createCustomForm.sort,
          show_type: createCustomForm.show_type,
          show_start: createCustomForm.show_start,
          show_end: createCustomForm.show_end
        }
        
        // 如果有背景音乐，添加完整的资源数据到请求中
        if (createCustomForm.background_music) {
          requestData.background_music = JSON.stringify(createCustomForm.background_music)
        }
        
        // 如果有背景图片，添加完整的资源数据到请求中
        if (createCustomForm.background_image) {
          requestData.background_image = JSON.stringify(createCustomForm.background_image)
        }
        
        const response = await customArticleApi.create(requestData)
        
        if (response && response.code === 200) {
          message.success('自定义文章创建成功')
          createCustomModalVisible.value = false
          handleCreateCustomCancel()
          fetchArticleList()
        } else {
          message.error(response?.message || '自定义文章创建失败')
        }
      } catch (error) {
        console.error('自定义文章创建失败:', error)
        const errorMessage = error.response?.data?.message || error.message || '自定义文章创建失败'
        message.error(errorMessage)
      } finally {
        createCustomLoading.value = false
      }
    }
    
    const handleCreateCustomCancel = () => {
      createCustomModalVisible.value = false
      createCustomForm.title = ''
      createCustomForm.description = ''
      createCustomForm.status = 'draft'
      createCustomForm.is_featured = false
      createCustomForm.is_active = true
      createCustomForm.sort = 1
      createCustomForm.show_type = 1
      createCustomForm.show_start = null
      createCustomForm.show_end = null
      // 清空content图片
      contentImages.value = []
      createCustomForm.background_music = null
      createCustomForm.background_image = null
      
      // 清空文件上传
      backgroundMusicFileList.value = []
      backgroundImageFileList.value = []
      backgroundMusicUploading.value = false
      backgroundImageUploading.value = false
    }
    
    // 背景音乐上传处理
    const handleBackgroundMusicUpload = async (file) => {
      backgroundMusicUploading.value = true
      try {
        const formData = new FormData()
        formData.append('file', file)
        
        const response = await fileApi.upload(formData)
        if (response && response.code === 200) {
          // 保存完整的资源数据
          createCustomForm.background_music = {
            file_id: response.data.file_id,
            url: response.data.url,
            thumbnail_url: response.data.thumbnail_url,
            file_size: response.data.file_size,
            file_type: response.data.file_type,
            original_name: response.data.original_name,
            name: file.name
          }
          backgroundMusicFileList.value = [{
            uid: file.uid,
            name: file.name,
            status: 'done'
          }]
          message.success('背景视频上传成功')
        } else {
          message.error('背景视频上传失败')
        }
      } catch (error) {
        console.error('背景视频上传失败:', error)
        message.error('背景视频上传失败')
      } finally {
        backgroundMusicUploading.value = false
      }
      return false // 阻止自动上传
    }
    
    // 移除背景音乐
    const handleRemoveBackgroundMusic = () => {
      createCustomForm.background_music = null
      backgroundMusicFileList.value = []
    }
    
    // 背景图片上传处理
    const handleBackgroundImageUpload = async (file) => {
      backgroundImageUploading.value = true
      try {
        const formData = new FormData()
        formData.append('file', file)
        
        const response = await fileApi.upload(formData)
        if (response && response.code === 200) {
          // 保存完整的资源数据
          createCustomForm.background_image = {
            file_id: response.data.file_id,
            url: response.data.url,
            thumbnail_url: response.data.thumbnail_url,
            file_size: response.data.file_size,
            file_type: response.data.file_type,
            original_name: response.data.original_name,
            name: file.name
          }
          backgroundImageFileList.value = [{
            uid: file.uid,
            name: file.name,
            status: 'done'
          }]
          message.success('背景图片上传成功')
        } else {
          message.error('背景图片上传失败')
        }
      } catch (error) {
        console.error('背景图片上传失败:', error)
        message.error('背景图片上传失败')
      } finally {
        backgroundImageUploading.value = false
      }
      return false // 阻止自动上传
    }
    
    // 移除背景图片
    const handleRemoveBackgroundImage = () => {
      createCustomForm.background_image = null
      backgroundImageFileList.value = []
    }
    
    // content图片上传处理
    const handleContentImageUpload = async (file) => {
      contentImageUploading.value = true
      try {
        const formData = new FormData()
        formData.append('file', file)
        
        const response = await fileApi.upload(formData)
        if (response && response.code === 200) {
          // 创建图片预览URL
          const reader = new FileReader()
          reader.onload = (e) => {
            // 找到对应的图片项并更新预览
            const imageIndex = contentImages.value.findIndex(img => img.file_id === response.data.file_id)
            if (imageIndex !== -1) {
              contentImages.value[imageIndex].preview = e.target.result
            }
          }
          reader.readAsDataURL(file)
          
          // 立即添加到数组中，保存完整的资源数据
          contentImages.value.push({
            id: response.data.file_id,
            name: file.name,
            preview: '', // 预览URL稍后通过FileReader更新
            file_id: response.data.file_id,
            url: response.data.url,
            thumbnail_url: response.data.thumbnail_url,
            file_size: response.data.file_size,
            file_type: response.data.file_type,
            original_name: response.data.original_name
          })
          
          message.success('图片上传成功')
        } else {
          message.error('图片上传失败')
        }
      } catch (error) {
        console.error('图片上传失败:', error)
        message.error('图片上传失败')
      } finally {
        contentImageUploading.value = false
      }
      return false // 阻止自动上传
    }
    
    // 移除content图片
    const removeContentImage = (index) => {
      contentImages.value.splice(index, 1)
    }
    
    // 发布文章
    const handlePublish = (record) => {
      Modal.confirm({
        title: '确认发布',
        content: `确定要发布文章「${record.title}」吗？`,
        onOk: async () => {
          try {
            const response = await articleApi.publish(record.id)
            if (response && response.code === 200) {
              message.success('文章发布成功')
              fetchArticleList()
            } else {
              message.error(response?.message || '文章发布失败')
            }
          } catch (error) {
            console.error('文章发布失败:', error)
            message.error('文章发布失败')
          }
        }
      })
    }

    // 下架文章
    const handleUnpublish = (record) => {
      Modal.confirm({
        title: '确认下架',
        content: `确定要下架文章「${record.title}」吗？`,
        onOk: async () => {
          try {
            const response = await articleApi.unpublish(record.id)
            if (response && response.code === 200) {
              message.success('文章下架成功')
              fetchArticleList()
            } else {
              message.error(response?.message || '文章下架失败')
            }
          } catch (error) {
            console.error('文章下架失败:', error)
            message.error('文章下架失败')
          }
        }
      })
    }
    
    // 删除文章
    const handleDelete = (record) => {
      Modal.confirm({
        title: '确认删除',
        content: `确定要删除文章「${record.title}」吗？`,
        onOk: async () => {
          try {
            const response = await articleApi.delete(record.id)
            if (response && response.code === 200) {
              message.success('文章删除成功')
              fetchArticleList()
            } else {
              message.error(response?.message || '文章删除失败')
            }
          } catch (error) {
            console.error('文章删除失败:', error)
            message.error('文章删除失败')
          }
        }
      })
    }
    
    // 工具函数
    const getStatusText = (record) => {
      if (record.status === 'published' && record.is_active) {
        return '已发布'
      } else if (record.status === 'published' && !record.is_active) {
        return '已下架'
      }
      
      const statusMap = {
        draft: '草稿',
        published: '已发布',
        archived: '已归档'
      }
      return statusMap[record.status] || record.status
    }
    
    const getStatusColor = (status) => {
      const colorMap = {
        draft: 'orange',
        published: 'green',
        archived: 'gray'
      }
      return colorMap[status] || 'default'
    }
    
    const formatDate = (dateString) => {
      if (!dateString) return '-'
      return new Date(dateString).toLocaleString('zh-CN')
    }
    
    // 解析文章内容中的图片
    const getContentImages = (content) => {
      if (!content) return []
      
      try {
        // 如果content是字符串，尝试解析为JSON
        const contentData = typeof content === 'string' ? JSON.parse(content) : content
        
        // 如果是数组，过滤出图片类型的内容
        if (Array.isArray(contentData)) {
          return contentData.filter(item => item.type === 'image')
        }
        
        return []
      } catch (error) {
        console.error('解析文章内容失败:', error)
        return []
      }
    }

    // 预览背景图片
    const previewBackgroundImage = (backgroundImage) => {
      if (!backgroundImage) return
      
      const imageUrl = typeof backgroundImage === 'string' ? backgroundImage : backgroundImage.url
      const imageName = typeof backgroundImage === 'object' ? backgroundImage.original_name || backgroundImage.name : '背景图片'
      
      previewImageUrl.value = imageUrl
      previewImageTitle.value = imageName
      imagePreviewVisible.value = true
    }

    // 关闭图片预览
    const closeImagePreview = () => {
      imagePreviewVisible.value = false
      previewImageUrl.value = ''
      previewImageTitle.value = ''
    }

    // 播放背景音乐
    const playBackgroundMusic = async (backgroundMusic) => {
      if (!backgroundMusic) return
      
      const musicUrl = typeof backgroundMusic === 'string' ? backgroundMusic : backgroundMusic.url
      
      // 停止当前播放的音频
      if (currentAudio.value) {
        currentAudio.value.pause()
        currentAudio.value.currentTime = 0
        currentAudio.value = null
        // 等待一小段时间确保音频完全停止
        await new Promise(resolve => setTimeout(resolve, 100))
      }
      
      try {
        // 创建新的音频对象
        const audio = new Audio(musicUrl)
        
        // 设置音频属性
        audio.preload = 'auto'
        audio.volume = 0.7
        
        // 添加事件监听器
        audio.addEventListener('loadstart', () => {
          message.loading('正在加载音频...', 1)
        })
        
        audio.addEventListener('canplaythrough', () => {
          message.success('开始播放背景音乐')
        })
        
        audio.addEventListener('error', (e) => {
          console.error('音频加载失败:', e)
          message.error('音频加载失败，请检查文件格式')
          currentAudio.value = null
        })
        
        audio.addEventListener('ended', () => {
          message.info('音频播放完成')
          currentAudio.value = null
        })
        
        // 等待音频加载完成
        await new Promise((resolve, reject) => {
          audio.addEventListener('canplaythrough', resolve, { once: true })
          audio.addEventListener('error', reject, { once: true })
          audio.load()
        })
        
        currentAudio.value = audio
        
        // 播放音频
        await audio.play()
        
      } catch (error) {
        console.error('音频播放失败:', error)
        if (error.name === 'AbortError') {
          message.error('音频播放被中断，请重试')
        } else if (error.name === 'NotSupportedError') {
          message.error('不支持的音频格式')
        } else {
          message.error('音频播放失败，请检查文件是否有效')
        }
        currentAudio.value = null
      }
    }

    // 停止音频播放
    const stopAudio = () => {
      if (currentAudio.value) {
        currentAudio.value.pause()
        currentAudio.value = null
        message.info('已停止播放')
      }
    }
    
    // 格式化文件大小
    const formatFileSize = (bytes) => {
      if (!bytes) return '-'
      
      const sizes = ['B', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(1024))
      return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i]
    }
    
    // 获取背景音乐信息
    const getBackgroundMusicInfo = (backgroundMusic) => {
      if (!backgroundMusic) return '-'
      
      try {
        const musicData = typeof backgroundMusic === 'string' ? JSON.parse(backgroundMusic) : backgroundMusic
        return musicData.original_name || musicData.name || '未知文件'
      } catch (error) {
        return '解析失败'
      }
    }
    
    // 获取背景音乐URL
    const getBackgroundMusicUrl = (backgroundMusic) => {
      if (!backgroundMusic) return ''
      
      try {
        const musicData = typeof backgroundMusic === 'string' ? JSON.parse(backgroundMusic) : backgroundMusic
        return musicData.url || ''
      } catch (error) {
        return ''
      }
    }
    
    // 视频事件处理
    const handleVideoLoadStart = () => {
      message.loading('正在加载视频...', 1)
    }
    
    const handleVideoCanPlay = () => {
      message.success('视频加载完成，可以播放')
    }
    
    const handleVideoError = (e) => {
      console.error('视频加载失败:', e)
      message.error('视频加载失败，请检查文件格式')
    }
    
    const handleVideoEnded = () => {
      message.info('视频播放完成')
    }
    
    // 获取背景图片URL
    const getBackgroundImageUrl = (backgroundImage) => {
      if (!backgroundImage) return ''
      
      try {
        const imageData = typeof backgroundImage === 'string' ? JSON.parse(backgroundImage) : backgroundImage
        return imageData.thumbnail_url || imageData.url || ''
      } catch (error) {
        return ''
      }
    }
    
    // 获取背景图片信息
    const getBackgroundImageInfo = (backgroundImage) => {
      if (!backgroundImage) return '-'
      
      try {
        const imageData = typeof backgroundImage === 'string' ? JSON.parse(backgroundImage) : backgroundImage
        return imageData.original_name || imageData.name || '未知文件'
      } catch (error) {
        return '解析失败'
      }
    }
    
    // 处理图片加载错误
    const handleImageError = (event) => {
      event.target.src = '/placeholder-image.svg'
    }
    
    // 组件挂载时获取数据
    onMounted(() => {
      fetchArticleList()
    })
    
    return {
      loading,
      articleList,
      searchForm,
      pagination,
      columns,
      fetchArticleList,
      handleSearch,
      handleReset,
      handleTableChange,
      detailModalVisible,
      articleDetail,
      handleDetail,
      handleDetailModalClose,
      editModalVisible,
      editLoading,
      archiveLoading,
      editForm,
      handleEdit,
      handleEditSubmit,
      handleEditCancel,
      handleArchiveArticle,
      createH5ModalVisible,
      createH5Loading,
      createH5Form,
      handleCreateH5,
      handleCreateH5Submit,
      handleCreateH5Cancel,
      createCustomModalVisible,
      createCustomLoading,
      createCustomForm,
      backgroundMusicFileList,
      backgroundImageFileList,
      backgroundMusicUploading,
      backgroundImageUploading,
      contentImages,
      contentImageUploading,
      handleCreateCustom,
      handleCreateCustomSubmit,
      handleCreateCustomCancel,
      handleBackgroundMusicUpload,
      handleRemoveBackgroundMusic,
      handleBackgroundImageUpload,
      handleRemoveBackgroundImage,
      handleContentImageUpload,
      removeContentImage,
      handlePublish,
      handleUnpublish,
      handleDelete,
      getStatusText,
      getStatusColor,
      formatDate,
      getContentImages,
      formatFileSize,
      getBackgroundMusicInfo,
      getBackgroundMusicUrl,
      getBackgroundImageUrl,
      getBackgroundImageInfo,
      handleImageError,
      // 预览相关
      imagePreviewVisible,
      previewImageUrl,
      previewImageTitle,
      audioPlayer,
      currentAudio,
      previewBackgroundImage,
      closeImagePreview,
      playBackgroundMusic,
      stopAudio,
      // 视频事件处理
      handleVideoLoadStart,
      handleVideoCanPlay,
      handleVideoError,
      handleVideoEnded,
      h
    }
  }
})
</script>

<style scoped>
.article-list-container {
  padding: 20px;
  background: #ffffff;
  min-height: 100vh;
}

.search-card {
  margin-bottom: 16px;
  box-shadow: none;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
}

.article-table {
  background: white;
  border-radius: 6px;
  box-shadow: none;
  border: 1px solid #e8e8e8;
}

.article-table :deep(.ant-table) {
  table-layout: fixed;
}

.article-table :deep(.ant-table-tbody > tr > td) {
  vertical-align: middle;
  height: 50px;
  padding: 12px 16px !important;
  border-bottom: 1px solid #f0f0f0;
}

.article-table :deep(.ant-table-thead > tr > th) {
  background: #fafafa;
  font-weight: 600;
  height: 48px;
  padding: 12px 16px !important;
  border-bottom: 1px solid #e8e8e8;
}

.article-table :deep(.ant-table-tbody > tr) {
  transition: none;
}

.article-table :deep(.ant-table-tbody > tr:hover > td) {
  background-color: #f5f5f5 !important;
}

.status-tag {
  font-weight: 500;
}

.action-buttons .ant-btn {
  margin-right: 8px;
  padding: 4px 12px;
  font-size: 12px;
  height: 28px;
  border: 1px solid #d9d9d9;
}

.detail-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #262626;
  border-bottom: 2px solid #1890ff;
  padding-bottom: 8px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.detail-item {
  display: flex;
  align-items: center;
}

.detail-item .label {
  font-weight: 600;
  color: #595959;
  min-width: 100px;
  margin-right: 12px;
}

.detail-item .value {
  color: #262626;
  word-break: break-all;
}

.content-preview {
  background: #f5f5f5;
  padding: 16px;
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.content-editor {
  width: 100%;
}

.content-tip {
  margin-top: 8px;
}

.upload-tip {
  margin-top: 8px;
}

.content-editor-container {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.content-upload-area {
  flex: 1;
  min-width: 300px;
}

.content-preview-area {
  flex: 0 0 280px;
}

.phone-container {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.phone-header {
  text-align: center;
  font-weight: 600;
  color: #495057;
  margin-bottom: 12px;
}

/* 内容预览样式 */
.content-preview-container {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  min-height: 120px;
}

.content-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.content-image-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.content-image-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
}

.content-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.content-image-item:hover .content-image {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 12px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.content-image-item:hover .image-overlay {
  transform: translateY(0);
}

.image-info {
  font-size: 12px;
}

.image-name {
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-size {
  opacity: 0.8;
}

.empty-content {
  text-align: center;
  padding: 40px 20px;
  color: #8c8c8c;
}

/* 背景资源样式 */
.background-resources {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.resource-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  transition: box-shadow 0.2s ease;
}

.resource-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.resource-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  border-radius: 8px;
  background: #f5f5f5;
}

.icon-music {
  font-size: 24px;
}

.background-image-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
}

.resource-info {
  flex: 1;
}

.resource-name {
  font-weight: 600;
  color: #262626;
  margin-bottom: 4px;
}

.resource-details {
  color: #8c8c8c;
  font-size: 14px;
}

.resource-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.resource-video-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.video-player-container {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.background-music-video {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: #000;
}

.phone-header {
  padding-bottom: 8px;
  border-bottom: 1px solid #dee2e6;
}

.phone-content {
  background: white;
  border-radius: 12px;
  min-height: 400px;
  max-height: 500px;
  overflow-y: auto;
}

.empty-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #6c757d;
}

.image-list {
  display: flex;
  flex-direction: column;
}

.image-item {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-item img {
  width: 100%;
  height: auto;
  display: block;
}

.image-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  padding: 4px;
}

.image-actions .ant-btn {
  color: white;
  border: none;
  background: transparent;
}

.image-actions .ant-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.upload-tip .ant-typography {
  color: #8c8c8c;
}

.custom-article-modal-content {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.form-section {
  flex: 1;
  min-width: 0;
}

.preview-section {
  flex: 0 0 320px;
}
</style>